<template>
  <div v-if="show" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
      <!-- 背景遮罩 -->
      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" @click="$emit('close')"></div>

      <!-- 使内容居中 -->
      <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

      <!-- 弹窗内容 -->
      <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <!-- 图标 -->
            <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
              <svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
              </svg>
            </div>
            
            <!-- 内容 -->
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
              <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">兑换会员码</h3>
              <div class="mt-4">
                <p class="text-sm text-gray-500 mb-4">请输入您的会员兑换码，激活会员特权</p>
                <div class="relative">
                  <input 
                    type="text" 
                    v-model="redeemCode" 
                    class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-center font-mono tracking-wider text-lg"
                    placeholder="XXXX"
                    @keyup.enter="handleConfirm"
                    ref="codeInput"
                  />
                  <div v-if="errorMessage" class="mt-2 text-sm text-red-600">{{ errorMessage }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 按钮区域 -->
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button 
            type="button" 
            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"
            @click="handleConfirm"
            :disabled="isLoading"
          >
            <svg v-if="isLoading" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            确认兑换
          </button>
          <button 
            type="button" 
            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
            @click="$emit('close')"
          >
            取消
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, watch } from 'vue';

// 定义组件接收的属性
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
});

// 定义组件可以触发的事件
const emit = defineEmits(['close', 'confirm']);

// 组件内部状态
const redeemCode = ref('');
const errorMessage = ref('');
const isLoading = ref(false);
const codeInput = ref<HTMLInputElement | null>(null);

// 处理确认按钮点击
const handleConfirm = async () => {
  // 清除之前的错误信息
  errorMessage.value = '';
  
  // 验证兑换码格式
  if (!redeemCode.value.trim()) {
    errorMessage.value = '请输入兑换码';
    return;
  }
  
  // 显示加载状态
  isLoading.value = true;
  
  try {
    // 这里可以添加实际的兑换码验证逻辑，例如发送API请求
    // 模拟API请求延迟
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    // 触发确认事件，将兑换码传递给父组件
    emit('confirm', redeemCode.value);
    
    // 重置输入
    redeemCode.value = '';
  } catch (error) {
    // 处理错误
    console.error('兑换码验证失败:', error);
    errorMessage.value = '兑换码验证失败，请稍后重试';
  } finally {
    // 无论成功或失败，都关闭加载状态
    isLoading.value = false;
  }
};

// 当弹窗显示时，自动聚焦到输入框
onMounted(() => {
  watch(() => props.show, (value) => {
    if (value) {
      nextTick(() => {
        codeInput.value?.focus();
      });
    }
  }, { immediate: true });
});
</script> 